<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jQuery Hover3d</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<a href="https://github.com/ariona/hover3d"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>

	<div class="site-content">
		<div class="align-center">
			<img src="dist/images/hover3d.png" width=150 height=121 alt="">
			<h1>jQuery Hover3d</h1>
			<div class="share">
				<!-- Place this tag where you want the button to render. -->
				<a class="github-button" href="https://github.com/ariona/hover3d" data-icon="octicon-star" data-count-href="/ariona/hover3d/stargazers" data-count-api="/repos/ariona/hover3d#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star ariona/hover3d on GitHub">Star</a>
				<!-- Place this tag where you want the button to render. -->
				<a class="github-button" href="https://github.com/ariona/hover3d/fork" data-icon="octicon-repo-forked" data-count-href="/ariona/hover3d/network" data-count-api="/repos/ariona/hover3d#forks_count" data-count-aria-label="# forks on GitHub" aria-label="Fork ariona/hover3d on GitHub">Fork</a>
				<a class="twitter-share-button" href="https://twitter.com/intent/tweet?text=jQuery Hover3d for creating 3d Hover effect">Tweet</a>
			</div>
		</div>

		<p>jQuery Hover3d is a simple hover script for creating 3d hover effect. It was my experiment on exploring CSS3 3d transform back in 2015 on <a href="http://codepen.io/ariona/pen/JopOOr">Codepen 3D hover plane effect.</a></p>

		<p>The idea is transforming the element into 3d space using CSS3 transform, playing with translateZ for spacing the elements, and detecting mouse movement to change the transform value</p>


		<div class="demo demo-1">
			<h2 class="section-title">Demo #1 Awesome tilt effect</h2>

			<p>Simple hover effect for your project</p>
			<div class="project-list">
				<div class="project">
					<div class="project__card">
						<a href="" class="project__image"><img src="http://unsplash.it/600/400?image=189" width=600 height=400 alt=""></a>
						<div class="project__detail">
							<h2 class="project__title"><a href="#">Project Name</a></h2>
							<small class="project__category"><a href="#">Photography</a></small>
						</div>
					</div>
				</div>

				<div class="project">
					<div class="project__card">
						<a href="" class="project__image"><img src="http://unsplash.it/600/400?image=129" width=600 height=400 alt=""></a>
						<div class="project__detail">
							<h2 class="project__title"><a href="#">Project Name</a></h2>
							<small class="project__category"><a href="#">Photography</a></small>
						</div>
					</div>
				</div>

				<div class="project">
					<div class="project__card">
						<a href="" class="project__image"><img src="http://unsplash.it/600/400?image=119" width=600 height=400 alt=""></a>
						<div class="project__detail">
							<h2 class="project__title"><a href="#">Project Name</a></h2>
							<small class="project__category"><a href="#">Photography</a></small>
						</div>
					</div>
				</div>

				<div class="project">
					<div class="project__card">
						<a href="" class="project__image"><img src="http://unsplash.it/600/400?image=89" width=600 height=400 alt=""></a>
						<div class="project__detail">
							<h2 class="project__title"><a href="#">Project Name</a></h2>
							<small class="project__category"><a href="#">Photography</a></small>
						</div>
					</div>
				</div>
			</div>

		</div>
		<div class="demo demo-2">
			<div class="columns">
				<div class="column">
					<h2 class="section-title">Demo #2: AppleTv Icon</h2>
					<p>By enabling shine option, you can create appleTV icon like effect. Be creating multiple layer for creating depth effect</p>

					<pre>
$(".movie").hover3d({
	selector: ".movie__card",
	shine: true,
	sensitivity: 20,
});</pre>
				</div>
				<div class="column">
					<div class="movie">
						<div class="movie__card">
							<div class="layer-1"></div>
							<div class="layer-2"></div>
							<div class="layer-3"></div>
						</div>
					</div>
				</div>
			</div>

		</div>
	</div>

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
	<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.12.1.min.js"><\\/script>')</script>
	<!-- Place this tag right after the last button or just before your close body tag. -->
	<script async defer id="github-bjs" src="https://buttons.github.io/buttons.js"></script>
	<script>window.twttr = (function(d, s, id) {
	  var js, fjs = d.getElementsByTagName(s)[0],
	    t = window.twttr || {};
	  if (d.getElementById(id)) return t;
	  js = d.createElement(s);
	  js.id = id;
	  js.src = "https://platform.twitter.com/widgets.js";
	  fjs.parentNode.insertBefore(js, fjs);
	 
	  t._e = [];
	  t.ready = function(f) {
	    t._e.push(f);
	  };
	 
	  return t;
	}(document, "script", "twitter-wjs"));</script>
	<script src="dist/js/jquery.hover3d.js" ></script>

	<script>
		$(document).ready(function(){
			$(".project").hover3d({
				selector: ".project__card"
			});

			$(".movie").hover3d({
				selector: ".movie__card",
				shine: true,
				sensitivity: 20,
			});
		});

	</script>
</body>
</html>